<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var socket;
        var current_channel = ''
        var change_channel = function (channel) {
            document.title = '聊天室 - ' + channel;
            if (current_channel) {
                $("#id-div-channels-title").text(document.title);
            } else {
                $("#id-div-channels-title").text('聊天室-未加入聊天室');
            }
        }
        var clear_board = function () {
            $('#id_chat_area').val('');
        }
        $(document).ready(function () {
            socket = io.connect('ws://' + document.domain + ':' + location.port + '/chat');
            socket.on('connect', function () {
                console.log('connect');
                clear_board();
            });
            change_channel(current_channel)
            socket.on('status', function (data) {
                $('#id_chat_area').val($('#id_chat_area').val() + '<' + data.msg + '>\n');
            });
            socket.on('message', function (data) {
                $('#id_chat_area').val($('#id_chat_area').val() + data.msg + '\n');
            });
            $('#text').keypress(function (e) {
                var code = e.key;
                if (code == "Enter") {
                    if (!current_channel) {
                        console.log("no current_channel:", current_channel);
                        $('#text').val('');
                        alert('未加入聊天室')
                        return;
                    }
                    text = $('#text').val();
                    $('#text').val('');
                    socket.emit('text', {msg: text, room: current_channel});
                }
            });
            $('.rc-channel').on('click', function (e) {
                if (current_channel) {
                    socket.emit('left', {}, function () {
                        console.log('left room')
                    })
                }
                current_channel = $(this).text();
                change_channel(current_channel);
                clear_board();
                socket.emit('joined', {msg: current_channel});
                $('#id_chat_area').empty();
            })
        })

    </script>
</head>
<body>
<div id="id-div-channels" class="rc-left">
    <h1 id="id-div-channels-title">聊天室</h1>
    <a class="rc-channel" href="#">hall</a>
    <a class="rc-channel" href="#">game</a>
    <a class="rc-channel" href="#">water</a>
</div>
<h1>chat</h1>
<textarea id="id_chat_area" cols="80" rows="20"></textarea><br><br>
<input id="text" size="80" placeholder="Enter your message here"><br><br>
</body>
</html>